<template>
	<div class="publicformview">
		<el-dialog :visible.sync="lishiShow" title="历史租金" width="80%" :before-close="lishiClose">
			
				<div class="headTop">
					<div class="xinxi">
						<el-button type="primary" size="mini" @click="handleUpdate()">录入</el-button>
					</div>
				</div>
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="年月" prop="yearmonth" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="租定金额" prop="monthrent" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="盈亏" prop="profitloss" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="减免原因" prop="discountreason" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="减租" prop="rentdiscount" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="基本租金" prop="basicrent" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="暖气租金" prop="heatrent" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="超高租金" prop="overheightrent" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="电梯租金" prop="elevatorrent" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="独用面积" prop="singleusearea" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="伙用面积" prop="sharearea" width="100">
				</el-table-column>
			
				<el-table-column align="center" label="摊后面积" prop="afterarea" width="100">
				</el-table-column>
				<el-table-column fixed="right" align="center" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" size="mini" @click="detailpdate(scope.row)">修改</el-button>
						<el-button type="text" size="mini" @click="deletepdate(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 档案录入变动情况 -->
		<el-dialog :visible.sync="addShow" append-to-body title="添加租金" width="80%" :before-close="handleClose"
			style="margin-top: 60px;">
			<el-form :rules='rules' :model="addQuery" ref="addForm" class="demo-ruleForm" label-position="right"
				label-width="150px">

				<el-col :span="6">
					<el-form-item label="年月：" prop="yearmonth">
						<el-date-picker v-model="addQuery.yearmonth" type="date" placeholder="年/月/日" style="width: 100%">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="租金定额：" prop="monthrent">
						<el-input v-model="addQuery.monthrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="盈亏：" prop="profitloss">
						<el-input v-model="addQuery.profitloss"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="减免原因：" prop="discountreason">
						<el-input v-model="addQuery.discountreason"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="减租：" prop="rentdiscount">
						<el-input v-model="addQuery.rentdiscount"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="基本租金：" prop="basicrent">
						<el-input v-model="addQuery.basicrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="暖气租金：" prop="heatrent">
						<el-input v-model="addQuery.heatrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="超高租金：" prop="overheightrent">
						<el-input v-model="addQuery.overheightrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="电梯租金：" prop="elevatorrent">
						<el-input v-model="addQuery.elevatorrent"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="独用面积：" prop="singleusearea">
						<el-input v-model="addQuery.singleusearea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="伙用面积：" prop="sharearea">
						<el-input v-model="addQuery.sharearea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="摊后面积：" prop="afterarea">
						<el-input v-model="addQuery.afterarea"></el-input>
					</el-form-item>
				</el-col>
				</el-row>
			</el-form>
			<div class="saveContents">
				<el-button type="primary" @click="addUpdate" size="medium">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		renterYearRentList,
		addRenterYearRent,
		updRenterYearRent,
		delRenterYearRent
	} from '@/api/management'
	export default {
		props: {
			lishiShow: Boolean,
			blockno: String,
			rentId: String
		},
		name: "fangwuxianzhuang",
		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 20
				},
				total: 0,
				options: [{
					key: "1"
				}],
				addQuery: {
					yearmonth: '',
					monthrent: '',
					profitloss: '',
					discountreason: '',
					rentdiscount: '',
					basicrent: '',
					heatrent: '',
					overheightrent: '',
					elevatorrent: '',
					singleusearea: '',
					sharearea: '',
					afterarea: '',
				},
				rules: {
					yearmonth: [{
						required: true,
						message: '请选择年月',
						trigger: 'blur'
					}],
					monthrent: [{
						required: true,
						message: '请输入租金定额',
						trigger: 'blur'
					}],
					profitloss: [{
						required: true,
						message: '请输入盈亏',
						trigger: 'blur'
					}],
					discountreason: [{
						required: true,
						message: '请输入减免原因',
						trigger: 'blur'
					}],
					rentdiscount: [{
						required: true,
						message: '请输入减租',
						trigger: 'blur'
					}],
					basicrent: [{
						required: true,
						message: '请输入基本租金',
						trigger: 'blur'
					}],
					heatrent: [{
						required: true,
						message: '请输入暖气租金',
						trigger: 'blur'
					}],
					overheightrent: [{
						required: true,
						message: '请输入超高租金',
						trigger: 'blur'
					}],
					elevatorrent: [{
						required: true,
						message: '请输入电梯租金',
						trigger: 'blur'
					}],
					singleusearea: [{
						required: true,
						message: '请输入独用面积',
						trigger: 'blur'
					}],
					sharearea: [{
						required: true,
						message: '请输入伙用面积',
						trigger: 'blur'
					}],
					afterarea: [{
						required: true,
						message: '请输入摊后面积',
						trigger: 'blur'
					}],
				},
				list: [],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				repairid: '',
				luruPopup: false,
				tableData: [],
				addShow: false,
				typeName: ''
			};
		},

		computed: {},

		mounted() {
			this.renterYearRentList()
		},

		methods: {
			renterYearRentList() {
				let data = {
					rentId: this.rentId
				}
				console.log(data)
				renterYearRentList(data).then(res => {
					console.log(res)
					this.list = res.data
				})
			},
			handleUpdate() {
				this.addShow = true
				this.typeName = '添加'
			},
			addUpdate() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						let data = this.addQuery
						data.yearmonth = dayjs(data.yearmonth).format('YYYY-MM')
						if (this.typeName == '修改') {
							updRenterYearRent(data).then(res => {
								this.addShow = false
								this.$message({
									type: 'success',
									message: '操作成功!'
								});
								this.renterYearRentList()
							})
						} else {
							data.renterid = this.rentId
							addRenterYearRent(data).then(res => {
								this.addShow = false
								this.$message({
									type: 'success',
									message: '操作成功!'
								});
								this.renterYearRentList()
							})
						}
					} else {
						console.log('验证失败！');
						return false;
					}
				});

			},
			// 修改
			detailpdate(e) {
				this.addQuery = e
				this.addShow = true
				this.typeName = '修改'
			},
			deletepdate(id) {
				let data = {
					id: id
				}
				delRenterYearRent(data).then(res => {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.renterYearRentList()
				})
			},
			reter() {
				this.addQuery.orderno = '',
					this.addQuery.startdate = '',
					this.addQuery.stopdate = '',
					this.addQuery.department = '',
					this.addQuery.content = '',
					this.addQuery.roomcount = '',
					this.addQuery.area = '',
					this.addQuery.money = '',
					this.addQuery.finishlevel = '',
					this.addQuery.finishroomcount = '',
					this.addQuery.finisharea = ''
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.renterYearRentList()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.renterYearRentList()
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.reter()
					})
					.catch(_ => {});
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			returns() {
				this.$router.go(-1)
			},
			lishiClose(){
				this.$emit('lishiClose')
			}
		},
	};
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #EFF2F7;
		color: #333333;
		border: none;
	}

	.fangwuList {
		width: 100%;
		background-color: #F5F5F5;
		margin: 3px auto 0;
		overflow: hidden;
	}

	.fangwuText {
		font-weight: bold;
		font-size: 16px;
		color: #008C93;
		margin-top: 20px;
		margin-left: 26px;
	}

	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.saveContents {
		width: 100%;
		display: flex;
		margin-top: 20px;
		padding-bottom: 20px;
		justify-content: end;
	}

	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}
</style>